<%--
  Created by IntelliJ IDEA.
  User: 86177
  Date: 2024/9/25
  Time: 20:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored ="false" %>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>新手指引</title>
</head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.css"/>
<body>
<h1 id="neo1">把大象放冰箱要几步？</h1>
<h1>第一步：</h1><p id="neo2">打开冰箱。</p>
<h1>第二步：</h1><p id="neo3">把大象放进去。</p>
<h1>第三步：</h1><p id="neo4">关上冰箱门。</p>
</body>
<script src="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.js.iife.js"></script>
<script>
  const driver = window.driver.js.driver;

  const driverObj = driver({
    showProgress: true,
    allowClose: false,
    steps: [
      { element: '#neo1', popover: { title: '一个单纯的代码怎么会问出这种问题，大象与冰箱之间的体型差距不言而喻，在这里作者却发出疑问：要如何把大象放进冰箱，言语之间透发出一股黑色幽默。', description: '这是一个难以言表的经典黑色幽默的句子，全程都看不出来是一个黑色幽默的短句，可处处都在诉说着黑色幽默的故事', side: "left", align: 'start' }},
      { element: '#neo2', popover: { title: '一步简单朴实的动作，打开冰箱门被列为第一步，对于平常繁琐的问题解决都十分的怪异，让人浮想连篇：打开了的冰箱门莫不是要扩容？开了冰箱大象就会缩小吗？仔细想来第一步就超出了大部分人的预期，在预期与实际的巨大差距下，显得十分可笑。', description: '如何将大象装进冰箱-第一步', side: "bottom", align: 'start' }},
      { element: '#neo3', popover: { title: '第二步就已经难点重重了，不去说冰箱与大象庞大的体型差，把大象装进冰箱真的就只需要“放”吗？这一句简单的句子尽显糊涂作风的黑色幽默。', description: '如何将大象装进冰箱-第二步', side: "bottom", align: 'start' }},
      { element: '#neo4', popover: { title: '第三步更是匪夷所思，关上冰箱门一步简单的动作，竟作为结束动作，且不说第二步的大象是否真的进入了冰箱，直接关上冰箱门难道不会显得荒唐吗？', description: '如何将大象装进冰箱-第三步', side: "bottom", align: 'start' }},
      { popover: { title: '一个难如登天的问题，几倍之大的体型差仅仅使用三个步骤就能够实现，按此看来莫过于草率，大问题却小解决了，体现的十分不负责任。', description: '开个玩笑' } }
    ],
    // onDestroyStarted is called when the user tries to exit the tour
    onDestroyStarted: () => {
      if (!driverObj.hasNextStep() || confirm("你真的不看完吗？")) {
        driverObj.destroy();
      }
    },
    onDestroyed: () => {
      console.log("已经被关闭");
    },
  });

  driverObj.drive();
</script>
</html>